<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Insert title here</title>
	<script type="text/javascript" src="js/ajax.js"></script>
	<script type="text/javascript">
		function get_city() {
			var xhr = getXhr();
			xhr.open("get", "/ajax01/get_city.do?province=" + $F("s1"), true);
			xhr.onreadystatechange = function () {
				if(xhr.readyState == 4 && xhr.status == 200) {
					var str = xhr.responseText; // 获取服务器传过来的字符串
					var citys = str.split(','); // 依据逗号进行分割
					
					$("s2").innerHTML = ""; // 清空s2对应的下拉列表
					for(var i = 0; i < citys.length; i++) {
						var city = citys[i];
						var cityInfo = city.split(':'); // 依据冒号进行分割
						var op = new Option(cityInfo[1], cityInfo[0]); // 构造option
						$("s2").options[i] = op; // 将构造号的option放到s2对应的下拉列表
					}
				}
			};
			xhr.send(null);
		}
		
	</script>
	<style>
		* {
			margin: 0px;
			padding: 0px;
		}
		select {
			width: 100px;
			vertical-align: middle;
			margin-top: 20px;
			margin-left: 10px;
		}
	</style>
</head>
<body>
	<select id="s1" onchange="get_city();">
		<option value="cq">重庆</option>
		<option value="sc">四川</option>
	</select>
	
	<select id="s2"></select>
</body>
</html>